<template>
  <footer class="footer">
    <ul>
      <router-link to="/home" tag="li" >
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </router-link>
       <router-link to="/list" tag="li">
        <span class="iconfont icon-anli"></span>
        <p>案例</p>
      </router-link>
     <router-link to="/know" tag="li">
        <span class="iconfont icon-zhishiguanli"></span>
        <p>知识</p>
    </router-link>
      <router-link to="/user" tag="li">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </footer>
</template>

<script>
export default {
  name: 'my-footer'
}
</script>

<style lang="stylus">
ul, li, p 
  padding 0
  margin 0

.footer 
  ul
    width 100%
    height 100%
    display flex
    li
      flex 1
      height 100%
      display flex
      flex-direction column
      align-items center
      justify-content center
      // &.&.router-link-active 想当于给 li上设置了 样式，通过审查元素 得知自动添加的样式
      &.router-link-active
        color #f66
      span 
        font-size 20px
      p
        font-size 14px
        margin-top 5px
      
</style>